<template>
	<view>
		<view class="list-item top-wrap">
			<text class="record" @click="gorecord">提现记录</text>
			<text class="money-all">{{money}}</text>
			<text style="color: #333333;font-size: 26upx;margin: 30upx 0 20upx;">可提现金额(元)</text>
		</view>

		<view class="list-item">

			<view style="justify-content: flex-start;margin: 40upx;display: flex;">
				<text style="font-size: 28upx;color: #333333;margin-right: 20upx;">提现方式</text>

				<!-- <view class="sel-type" @click="clickWithdrawalType(1)">
					<image :src="withdrawalType == 1 ? '/pagesB/static/withdraw/wx_selected.png' : '/pagesB/static/withdraw/wx_default.png'" mode="scaleToFill"></image>
					<text>微信</text>
				</view> -->


				<view class="sel-type" @click="clickWithdrawalType(3)">
					<image
						:src="withdrawalType == 3 ? '/pagesB/static/withdraw/xx_selected.png' : '/pagesB/static/withdraw/xx_default.png'"
						mode="scaleToFill"></image>
					<text>汇聚</text>
				</view>

			</view>

			<view style="margin: 0 40upx 0;display: flex;align-items: center;">
				<text style="font-size: 28upx;color: #333333; width: 150upx;">提现金额 </text>

				<view class="input-bg">
					<u-input v-model="applyAmount" type="digit" inputAlign="left" placeholder="请输入提现金额" shape="circle"
						border="surround" clearable maxlength="11">
					</u-input>
				</view>

			</view>

			<view class="withdraw-all" @click="allWithdraw">
				全部提现
			</view>

			<view v-if="withdrawalType == 3">
				<view style="margin: 30upx 40upx 0;display: flex;align-items: center;">
					<text style="font-size: 28upx;color: #333333; width: 150upx;">银行卡号</text>

					<view class="input-bg">
						<u-input v-model="gatheringAccount" type="number" inputAlign="left" placeholder="请输入银行卡号" shape="circle"
							border="surround" maxlength="19" clearable>
						</u-input>
					</view>

				</view>

				<view style="margin: 30upx 40upx 0;display: flex;align-items: center;">
					<text style="font-size: 28upx;color: #333333; width: 150upx;">真实姓名</text>

					<view class="input-bg">
						<u-input v-model="gatheringPeople" inputAlign="left" placeholder="请输入真实姓名" shape="circle"
							border="surround" clearable>
						</u-input>
					</view>

				</view>


			</view>


			<view style="margin-bottom: 80upx;">
				<view class="attention" style="font-size: 26upx;margin-top: 20upx;">提现说明</view>
				<view class="attention" style="margin-bottom: 20upx;">1、提现前需要保证银行卡号与姓名一致；<view class="_br">
					</view>
					2、用户可随时发起提现，提现到账时间预计1-5个工作日，如遇节假日，到账时间将顺延；<view class="_br"></view>3、提现后收入将转入银行卡账户，请注意查收；<view
						class="_br"></view>
				</view>
			</view>

		</view>


		<view class="bottom-btn bottom">
			<text @click="btnClick">立即提现</text>
		</view>
	</view>
</template>

<script>
	import {
		doWithDraw
	} from '@/api/user-api.js';

	export default {
		data() {
			return {
				memberWithdrawal: {},
				withdrawalType: 3,
				isAlipay: 2, //是否有支付宝账号
				showPayee: false,
				gatheringPeople: '',
				gatheringAccount: '',
				money: 0,
				applyAmount: '' //提现金额
			}
		},
		onLoad(op) {
			this.money = op.money;


			this.getData();
			this.getAlipayInfo();
		},
		methods: {

			getData() {
				memberWithdrawal({
					memberNo: this.$store.state.user.userInfo.customerId,
					tenantId: this.$store.state.user.tenantCode,
				}).then(res => {
					this.memberWithdrawal = res;
				})
			},


			//切换提现方式
			clickWithdrawalType(type) {
				this.withdrawalType = type;
				switch (type) {
					case 1: //微信

						break

					case 2: //支付宝
						break

					case 3: //线下

						break

				}


			},
			allWithdraw() {
				this.applyAmount = this.money;
			},

			//立即提现点击事件
			btnClick() {
				//提现规则校验
				if (this.$u.test.isEmpty(this.applyAmount)) {
					uni.$u.toast('请输入提现金额');
					return
				} else {
					var applyAmount = parseFloat(this.applyAmount);

					if (applyAmount <= 0) {
						uni.$u.toast('提现金额须大于0')
						return
					}

					if (applyAmount > this.money) {
						uni.$u.toast(`提现金额不得大于${this.money}`)
						return
					}

					//线下转账校验收款人或者收款人账户不能为空
					if (this.withdrawalType == 3) {
						if (this.$u.test.isEmpty(this.gatheringAccount)) {
							uni.$u.toast('请输入银行卡号');
							return
						}

						if (this.$u.test.isEmpty(this.gatheringPeople)) {
							uni.$u.toast('请输入真实姓名');
							return
						}

					}

					//提现接口调用
					doWithDraw({
						bankCardNo: this.gatheringAccount,
						transferAmount: this.applyAmount,
						personName: this.gatheringPeople,
						drawType:1

						// memberNo: this.$store.state.user.userInfo.customerId,
						// withdrawalType: this.withdrawalType,
						// applyAmount: this.applyAmount,
						// gatheringPeople: this.withdrawalType == 3 ? this.gatheringPeople : null,
						// gatheringAccount: this.withdrawalType == 3 ? this.gatheringAccount : null
					}).then(res => {
						uni.$u.toast('提现申请成功');
						uni.$emit('refresh')
						uni.navigateBack({})
					}).catch(e => {
						uni.$emit('refresh')
					})

				}
			},

			gorecord() {
				uni.navigateTo({
					url: '/pagesB/withdraw/withdrawrecord'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-wrap {
		@include flex(column);
		align-items: center;

		.record {
			font-size: 28upx;
			color: $green12;
			align-self: flex-end;
			margin: 40upx;
		}

		.money-all {
			font-size: 47upx;
			font-weight: bold;
			color: $green12;
		}

	}

	.sel-type {
		@include flex(column);
		align-items: center;
		margin: 0 40upx;

		image {
			width: 70upx;
			height: 70upx;
		}

		text {
			font-size: 24upx;
			color: $black33;
			margin-top: 20upx;
		}
	}

	.input-bg {
		margin-left: 20upx;
		// border-radius: 90upx;
		// border: solid 1px $graya7;
	}

	.withdraw-all {
		color: $green12;
		font-size: 24upx;
		margin: 20upx 0 0 210upx;
	}

	.attention {
		color: $graya7;
		font-size: 24upx;
		margin: 0 40upx;
		line-height: 40upx;
		letter-spacing: 1px;
	}

	.bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 2;
	}
</style>
